<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心声 - 声音的宝藏</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            background: rgba(255, 255, 255, 0.95);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #007bff;
        }

        /* 主视觉区域样式 */
        .hero {
            min-height: 100vh;
            background: linear-gradient(to bottom, 
                #ffb5c5 0%, 
                #fff0f3 50%, 
                #fff 100%
            );
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            padding-top: 4rem;
        }

        .app-icon {
            width: 180px;
            height: 180px;
            border-radius: 36px;
            margin: 2rem 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            margin-top: 8rem;  /* 增加顶部外边距，将图标进一步向下移动 */
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: #2c3e50;
            margin-top: 2rem;
        }

        .hero .subtitle {
            font-size: 1.2rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto 2rem;
        }

        /* 预览图片区域样式 */
        .preview-images {
            display: flex;
            gap: 2rem;
            margin-top: 10vh;  /* 减小与诗的距离 */
            justify-content: center;
        }

        .preview-image {
            width: 250px;
            height: 500px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            object-fit: contain;
            transition: transform 0.3s ease;
            background: white;
        }

        /* 专门为第三张图片添加样式 */
        .preview-image:last-child {
            object-position: center;
            object-fit: cover;
        }

        .preview-image:hover {
            transform: translateY(-5px);
        }

        /* 轮播图区域 */
        .carousel {
            width: 100%;
            max-width: 1200px;
            margin: 3rem auto;
            position: relative;
            overflow: hidden;
        }

        /* 功能介绍区域 */
        .features {
            padding: 4rem 5%;
            background: #fff;
        }

        .features-grid {
            display: flex;
            justify-content: center;
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            flex: 1;
            max-width: 250px;
            aspect-ratio: 1;
            padding: 2rem;
            text-align: center;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.4s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #ffb5c5, #fff0f3);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 1;
            border-radius: 50%;
        }

        .feature-card > * {
            position: relative;
            z-index: 2;
        }

        .feature-card:hover {
            transform: translateY(-10px) scale(1.05);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-card i {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #333;
            transition: transform 0.4s ease;
        }

        .feature-card:hover i {
            transform: scale(1.2);
        }

        .feature-card h3 {
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
            color: #333;
        }

        .feature-card p {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 1rem;
        }

        .feature-card .learn-more {
            color: #ff8ba7;
            text-decoration: none;
            font-weight: 500;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }

        .feature-card:hover .learn-more {
            opacity: 1;
            transform: translateY(0);
        }

        .feature-card .learn-more:hover {
            color: #ff6b8b;
        }

        /* 社交媒体链接区域 */
        .social-links {
            padding: 2rem;
            text-align: center;
            background: #fff;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 1rem 0;
        }

        .social-icons a {
            color: #666;
            font-size: 1.5rem;
            transition: transform 0.3s, color 0.3s;
        }

        .social-icons a:hover {
            color: #007bff;
            transform: scale(1.2);
        }

        /* 页脚样式 */
        footer {
            background: #2c3e50;
            color: #fff;
            padding: 2rem 5%;
            text-align: center;
        }

        footer a {
            color: #fff;
            text-decoration: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2rem;
            }

            .nav-links {
                display: none;
            }

            .download-buttons {
                flex-direction: column;
                align-items: center;
            }

            .features-grid {
                flex-direction: column;
                align-items: center;
            }
            
            .feature-card {
                width: 200px;
                margin-bottom: 2rem;
            }

            .preview-images {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
            }
            
            .preview-image {
                width: 250px;    /* 保持移动端的宽度一致 */
                height: 500px;   /* 保持移动端的高度一致 */
            }
        }

        /* 功能详情区域样式 */
        .feature-details {
            padding: 4rem 5%;
            background: linear-gradient(to bottom, 
                #fff 0%,
                #fff0f3 10%,
                #fff0f3 90%,
                #fff 100%
            );
        }

        .feature-section {
            max-width: 1200px;
            margin: 0 auto 4rem;
            padding: 2rem;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            scroll-margin-top: 100px;
        }

        .feature-section h2 {
            color: #333;
            margin-bottom: 1.5rem;
        }

        .feature-section p {
            color: #666;
            line-height: 1.8;
            margin-bottom: 1rem;
        }

        /* 平滑滚动效果 */
        html {
            scroll-behavior: smooth;
            scroll-padding-top: 80px;
        }

        /* 添加诗句样式 */
        .poem-section {
            text-align: center;
            padding: 4rem 2rem;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;  /* 稍微加快过渡速度 */
        }

        .poem-section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .poem-text {
            font-size: 1.2rem;
            line-height: 2;
            color: #666;
            white-space: pre-line;
            margin: 0 auto;
            max-width: 600px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="logo" style="display: flex; align-items: center; gap: 10px;">
            <img src="./imgs/app-icon.jpg" alt="心声 Logo" style="height: 40px; width: 40px; border-radius: 50%; object-fit: cover;">
            <span style="font-size: 1.5rem; font-weight: bold; color: #333;">心声</span>
            <span style="font-size: 1rem; color: #666; margin-left: 10px;">声音的宝藏</span>
        </div>
        <div class="nav-links">
            <a href="#features">功能介绍</a>
            <a href="#about">关于我们</a>
            <a href="#download">立即下载</a>
        </div>
    </nav>

    <!-- 主视觉区域 -->
    <section class="hero">
        <img src="./imgs/app-icon.jpg" alt="心声 Icon" class="app-icon">
        <h1>心声</h1>
        <p class="subtitle">倾听声音，储藏声音，让生活存温，让情绪留痕</p>
        
        <!-- 添加诗句部分 -->
        <div class="poem-section">
            <p class="poem-text">倾听，每缕声音的轻吟
是海浪冲刷，涌入心底
储存，那些灵动的频率
是车马喧嚣，藏进记忆

让生活的暖，在声音里栖身
三餐四季，余温萦绕
让情绪的痕，在声音中留存
喜怒哀乐，皆成岁月诗韵</p>
        </div>

        <div class="preview-images">
            <img src="./imgs/app-list.jpg" alt="预览图片1" class="preview-image">
            <img src="./imgs/app-listening.jpg" alt="预览图片2" class="preview-image">
            <img src="./imgs/app-comment.jpg" alt="预览图片3" class="preview-image">
        </div>
    </section>

    <!-- 功能介绍区域 -->
    <section class="features" id="features">
        <div class="features-grid">
            <div class="feature-card">
                <i class="fas fa-microphone fa-3x"></i>
                <h3>录音功能</h3>
                <p>高质量录音，智能降噪，让每一次录制都清晰完美</p>
                <a href="#recording-details" class="learn-more">了解更多</a>
            </div>
            <div class="feature-card">
                <i class="fas fa-users fa-3x"></i>
                <h3>社交圈子</h3>
                <p>连接志同道合的伙伴，分享交流，共同成长</p>
                <a href="#social-details" class="learn-more">了解更多</a>
            </div>
            <div class="feature-card">
                <i class="fas fa-chart-line fa-3x"></i>
                <h3>分析功能</h3>
                <p>智能数据分析，帮助您更好地了解和提升</p>
                <a href="#analysis-details" class="learn-more">了解更多</a>
            </div>
            <div class="feature-card">
                <i class="fas fa-store fa-3x"></i>
                <h3>商店</h3>
                <p>丰富的资源市场，满足您的多样化需求</p>
                <a href="#store-details" class="learn-more">了解更多</a>
            </div>
        </div>
    </section>

    <!-- 功能详情区域 -->
    <section class="feature-details">
        <div class="feature-section" id="recording-details">
            <h2>录音功能</h2>
            <p>我们的录音功能采用先进的降噪技术，无论在何种环境下都能保证清晰的录音质量。支持多种录音格式，满足不同场景需求。</p>
            <p>主要特点：</p>
            <ul>
                <li>高品质录音：专业级音频采集技术，支持多种采样率，智能降噪和回声消除，让您的声音更加清晰动听</li>
                <li>智能编辑：直观的音频编辑界面，支持剪切、拼接、混音、特效添加等多种编辑功能，让声音创作更加灵活</li>
                <li>安全存储：支持本地和云端双重备份，采用先进的加密技术，确保您的录音安全可靠，随时可取</li>
                <li>便捷分享：一键上传至社交平台，支持多种格式导出，让您的声音作品轻松传递给更多人</li>
            </ul>
        </div>

        <div class="feature-section" id="social-details">
            <h2>社交圈子</h2>
            <p>在这里，您可以找到志同道合的伙伴，分享经验，交流心得。我们提供安全、友好的社交环境，让每个用户都能找到属于自己的圈子。</p>
            <p>社交功能：</p>
            <ul>
                <li>兴趣小组：根据兴趣爱好自由组建或加入小组，与志同道合的伙伴一起分享、讨论、成长</li>
                <li>实时互动：支持点赞、收藏、评论、转发等多种互动方式，让交流更加丰富多彩</li>
                <li>资源分享：分享您的录音作品，获取他人的经验和建议，共同提升创作水平</li>
                <li>活动组织：支持在线活动发起和参与，包括主题创作、技巧分享、线上沙龙等多种形式</li>
                <li>关注机制：关注感兴趣的创作者，第一时间获取他们的最新动态和作品更新</li>
            </ul>
        </div>

        <div class="feature-section" id="analysis-details">
            <h2>分析功能</h2>
            <p>通过先进的数据分析技术，为您提供专业的数据洞察。帮助您更好地了解使用情况，不断提升和改进。</p>
            <p>分析工具：</p>
            <ul>
                <li>数据可视化：直观展示您的声音特征、情绪变化趋势，通过图表形式清晰呈现分析结果</li>
                <li>AI智能分析：运用先进的人工智能算法，对声音进行多维度分析，包括情绪识别、语气特征、表达方式等</li>
                <li>专业咨询：提供专业心理咨询导师一对一指导，根据AI分析结果给出个性化建议和改进方案</li>
                <li>趋势报告：定期生成个人成长报告，追踪情绪变化轨迹，帮助您更好地了解自己</li>
                <li>智能建议：基于AI分析和专家建议，为您提供个性化的提升建议和练习方案</li>
            </ul>
        </div>

        <div class="feature-section" id="store-details">
            <h2>商店</h2>
            <p>我们的商店提供丰富多样的资源，从个性化装扮到优质声音内容，满足您的多样化需求。所有资源经过严格筛选，确保高质量。</p>
            <p>商店特色：</p>
            <ul>
                <li>个性化装扮：丰富多样的主题皮肤、动态特效、个性化录音界面，让您的录音体验更加独特精彩</li>
                <li>声音交易：支持原创声音内容的售卖和购买，建立良性的声音创作生态，让优质内容得到应有回报</li>
                <li>特效商城：提供专业级音效、背景音乐、音频滤镜等创作素材，让您的作品更具表现力</li>
                <li>会员特权：享受高级录音功能、专属装扮、优先客服等多重权益，打造专属录音空间</li>
                <li>礼物系统：丰富的虚拟礼物，支持创作者之间的互动打赏，营造积极的社区氛围</li>
            </ul>
        </div>
    </section>

    <!-- 社交媒体链接 -->
    <div class="social-links">
        <div class="social-icons">
            <a href="#"><i class="fab fa-bilibili"></i></a>
            <a href="#"><i class="fab fa-weixin"></i></a>
            <a href="#"><i class="fab fa-tiktok"></i></a>
            <a href="#" style="font-size: 1.2rem; font-family: 'Microsoft YaHei', sans-serif; text-decoration: none; font-weight: bold;">
                小红书
            </a>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <p>© 2024 您的公司名称 All Rights Reserved</p>
        <p>
            <a href="#">隐私政策</a> | 
            <a href="#">使用条款</a>
        </p>
    </footer>

    <!-- 添加 JavaScript 代码 -->
    <script>
        let lastScrollPosition = window.pageYOffset;

        // 监听滚动事件
        window.addEventListener('scroll', function() {
            const poemSection = document.querySelector('.poem-section');
            const poemPosition = poemSection.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            const currentScrollPosition = window.pageYOffset;

            // 判断滚动方向和位置
            if (currentScrollPosition < lastScrollPosition) {
                // 向上滚动时
                poemSection.classList.remove('visible');
            } else if (poemPosition < screenPosition) {
                // 向下滚动且到达特定位置时
                poemSection.classList.add('visible');
            }

            lastScrollPosition = currentScrollPosition;
        });
    </script>
</body>
</html> 